<!-- 首页仪表盘 -->
<template>
  <div class="Echarts" style="position: relative; z-index: 1">
    <div id="echarts" style="width: 100%; height: 365px"></div>
    <div class="chart-inner">
      <div class="block">
        <div class="num">{{ value }}</div>
        <div class="unit">次</div>
      </div>
      <span>刷头剩余</span>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, onUnmounted, toRefs, watch, computed } from 'vue'
import * as echarts from 'echarts'
const { echartLevel } = require('../../utils/util')

export default {
  name: 'GaugeEcharts',
  props: {
    value: {
      type: Number,
      default: 0
    }
  },

  setup(props) {
    const state = reactive({
      colors: [],
      chartData: 0,
      Chart: null,
      echartsV: 0
    })

    watch(
      () => props.value,
      val => {
        state.chartData = val
        setTimeout(() => {
          state.colors = [
            ['#6A82FC', '#4994F5'],
            ['#FF762C', '#F9BA20']
          ][props.value > 30 ? 0 : 1]

          gaugeInit()
        })
      },
      { deep: true, immediate: true }
    )

    const colors = computed(() => {
      const cList = [
        ['#4994F5', '#6A82FC'],
        ['#FF762C', '#F9BA20']
      ]
      if (props.value <= 30) {
        return cList[0]
      } else {
        return cList[1]
      }
    })

    onMounted(() => {
      setTimeout(() => {
        gaugeInit()
      })
    })

    onUnmounted(() => {
      state.Chart.dispose()
    })

    const resize = () => {
      state.Chart.resize()
    }

    const gaugeInit = () => {
      // 指定图表的配置项和数据
      const option = {
        series: [
          {
            type: 'gauge',
            min: 0,
            max: 180,
            startAngle: 200,
            endAngle: -20,
            splitNumber: 12,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: state.colors[0]
              },
              {
                offset: 1,
                color: state.colors[1]
              }
            ]),
            progress: {
              show: true,
              roundCap: true,
              width: 22
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 22
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              offsetCenter: [0, 0],
              valueAnimation: true,
              color: state.colors[0],
              fontWeight: 'bold',
              fontSize: '40px',
              formatter: function (value) {
                // return echartLevel(value).title
              },
              rich: {
                value: {
                  fontSize: 60,
                  fontWeight: 'bolder',
                  color: '#f00'
                },
                unit: {
                  fontSize: 20,
                  color: '#999',
                  padding: [0, 0, -20, 10]
                }
              }
            },
            title: {
              color: '#000',
              fontSize: '14px',
              offsetCenter: ['0', '40%']
            },
            data: [
              {
                value: state.chartData
                // name: 'TVOC',
              }
            ]
          }
        ]
      }

      state.Chart = echarts.init(document.getElementById('echarts'))
      state.Chart.setOption(option)
    }
    return {
      ...toRefs(state),
      gaugeInit
    }
  }
}
</script>
<style lang="less" scoped>
.chart-inner {
  position: absolute;
  left: 0;
  top: -30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .block {
    display: flex;
    align-items: baseline;

    .num {
      font-size: 72px;
      color: var(--title-color);
      font-weight: bold;
      line-height: 100px;
    }

    .unit {
      font-size: 28px;
      color: var(--title-color);
      margin-left: 10px;
    }
  }

  & > span {
    font-size: 28px;
    color: var(--sub-title-color);
    margin-top: 4px;
  }
}
</style>
